<template>
  <div class="page-record">
    <div class="btns text-right">
      <span class="inline-block font-size-14 bg-blue btn-radius text-white" @click="showRule">游戏规则</span>
      <router-link class="inline-block font-size-14 bg-blue btn-radius text-white" to="prize">返回</router-link>
    </div>
    <h2>兑换记录</h2>
    <div class="record-list">
      <div class="record-item" v-for="(item,index) in recordList">
        <div>{{item.name}}</div>
        <div>积分：{{item.score}}</div>
        <div>兑换时间：{{item.addtime}}</div>
        <div>领取地址：{{item.address}}</div>
        <div>
          领取时间：<span v-if="item.receivetime">{{item.receivetime}}</span> <span @click="getPrize(index)" v-else class="text-blue">未领奖</span>
        </div>
        <div>咨询电话：{{item.telphone}}</div>
      </div>
    </div>
    <uiDialog :data="inputDialogData">
      <div class="input-dialog-content">
        <div class="text">请确定您在现场领取实物，密码一旦验证成功实物不可再次领取！</div>
        <input type="password" v-model="password">
      </div>
    </uiDialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import axios from 'axios'
  import uiDialog from '../components/dialog.vue'
  export default {
    name: 'record',
    data: function () {
      return {
        recordList: null,
        isShowInput:1,
        currentGoodsIndex: -1,
        password: '',
        inputDialogData:{
          title: '请输入领奖密码',
          visible:0,
          btns:['确定','取消'],
          callback: (index,data)=>{
            if(index==0&&this.password!=''){
              axios.get('/gxtest/getTrophyu',{params:{id:this.recordList[this.currentGoodsIndex].id,code:this.password}}).then(res=>{
                let text = '';
                if(res.data==0){
                  text = '领奖成功!'
                  this.recordList[this.currentGoodsIndex].receivetime = new Date().toLocaleString()
                  data.visible = 0
                }else if(res.data==1){
                  text='该奖品已兑换'
                }else if(res.data==9){
                  text='密码错误'
                }else{
                  text='领取失败,出现未知错误'
                }
                this.$store.commit('updateAlertData',{visible:1,text:text})
              })
            }else if(index==1){
              data.visible = 0
            }

          }
        }
      }
    },
    mounted(){
      axios.get('/gxtest/getMyCashRecord').then(res=>{
        this.recordList = res.data
      })
    },
    methods: {
      showRule(){
        this.$store.commit('showRule')
      },
      getPrize(index){
        this.currentGoodsIndex= index
        this.inputDialogData.visible = 1
      }
    },
    components: {
      uiDialog
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .page-record
    padding 10px
    background url("../assets/images/bg-image.jpg") no-repeat center center
    background-size 100% auto
    overflow-y scroll
    width 100vw
    height 100vh
    .record-item
      line-height 1.4
      padding 10px
      margin 10px 0
      background-color: #ffffff
    .input-dialog-content
      font-size 14px
      input
        width 100%
        margin 10px 0
        padding 4px
        border 1px solid #ccc
</style>
